<template>
  <div>
    <div v-if="showbutton"> <el-button @click="submit()"> 填报</el-button></div>
    <table style="width: 100%" border="1" cellspacing="1">
      <tbody>
        <tr>
          <td colspan="1">中心名称</td>
          <td colspan="8"><input type="text" v-model="dataform.orgName" /></td>
        </tr>
        <tr>
          <td colspan="1">主管单位</td>
          <td colspan="4"><input type="text" v-model="dataform.masterOrgName" /></td>
          <td colspan="2">法定代表人</td>
          <td colspan="2"><input type="text" v-model="dataform.legalPerson" /></td>
        </tr>
        <tr>
          <td colspan="1">负责人</td>
          <td colspan="4"><input type="text" v-model="dataform.responsiblePeople" /></td>
          <td colspan="2">固定电话</td>
          <td colspan="2"><input type="text" v-model="dataform.responsiblePhone" /></td>
        </tr>
        <tr>
          <td colspan="1" rowspan="3">经营管理模式(划“√”)</td>
          <td colspan="3">体育部门管理</td>
          <td colspan="3">教育部门管理</td>
          <td colspan="2" rowspan="2">其他</td>
        </tr>
        <tr>
          <td colspan="1">独立运行</td>
          <td colspan="1">依托体校</td>
          <td colspan="1">委托社会</td>
          <td colspan="1">独立运行</td>
          <td colspan="1">依托校外教育机构</td>
          <td colspan="1">委托社会</td>
        </tr>
        <tr>
          <td colspan="1"><input type="text" v-model="Businessmodel.SportsIndependence" /></td>
          <td colspan="1"><input type="text" v-model="Businessmodel.SportsSchool" /></td>
          <td colspan="1"><input type="text" v-model="Businessmodel.SportsSociety" /></td>
          <td colspan="1"><input type="text" v-model="Businessmodel.EducationalIndependence" /></td>
          <td colspan="1"><input type="text" v-model="Businessmodel.EducationOffCampus" /></td>
          <td colspan="1"><input type="text" v-model="Businessmodel.EducationalSociety" /></td>
          <td colspan="2"><input type="text" v-model="Businessmodel.other" /></td>

        </tr>
        <tr>
          <td colspan="1">建成时间</td>
          <td colspan="2"><input type="text" v-model="dataform.upTime" /></td>
          <td colspan="4">总面积(㎡)</td>
          <td colspan="2"><input type="text" v-model="dataform.acreage" /></td>
        </tr>
        <tr>
          <td colspan="1" rowspan="4">所获级别命名授予时间(年份)</td>
          <td colspan="4">国家级校外体育活动中心</td>
          <td colspan="4"><input type="text" v-model="dataform.getNationYear" /></td>
        </tr>
        <tr>
          <td colspan="4">省级校外体育活动中心</td>
          <td colspan="4"><input type="text" v-model="dataform.getProvinceYear" /></td>
        </tr>
        <tr>
          <td colspan="4">市级校外体育活动中心</td>
          <td colspan="4"><input type="text" v-model="dataform.getCityYear" /></td>
        </tr>
        <tr>
          <td colspan="4">县级校外体育活动中心</td>
          <td colspan="4"><input type="text" v-model="dataform.getCountyYear" /></td>
        </tr>
        <tr>
          <td colspan="1" rowspan="4">管理人员</td>
          <td colspan="2" rowspan="2">在编</td>
          <td colspan="2" rowspan="2">聘用</td>
          <td colspan="2" rowspan="2">指导教师总人数</td>
          <td colspan="1">在编</td>
          <td colspan="1">聘用</td>
        </tr>
        <tr>
          <td colspan="1"><input type="text" v-model="dataform.teacherOnNum" /></td>
          <td colspan="1"><input type="text" v-model="dataform.teacherOutNum" /></td>
        </tr>
        <tr>
          <td colspan="2" rowspan="2"><input type="text" v-model="dataform.manageOnNum" /></td>
          <td colspan="2" rowspan="2"><input type="text" v-model="dataform.manageOutNum" /></td>
          <td colspan="2" rowspan="2">教练员</td>
          <td colspan="1">在编</td>
          <td colspan="1">聘用</td>
        </tr>
        <tr>
          <td colspan="1"><input type="text" v-model="dataform.coachOnNum" /></td>
          <td colspan="1"><input type="text" v-model="dataform.coachOutNum" /></td>
        </tr>
        <tr>
          <td colspan="1" rowspan="2">举办活动/培训</td>
          <td colspan="4">年均数量(次)</td>
          <td colspan="4">参加活动/培训的学生总量(人)</td>
        </tr>
        <tr>
          <td colspan="4"><input type="text" v-model="dataform.yearActivityNum" /></td>
          <td colspan="4"><input type="text" v-model="dataform.yearJoinPeopleNum" /></td>
        </tr>
        <tr>
          <td colspan="1" :rowspan="2 * dataform.fSheet6bList.length+1">已开展的项目
            <el-tooltip content="右键点击项目名称可以新增或删除项目" placement="top" effect="light" :open-delay="500">
              <span style="color: #666; font-size: 12px; cursor: help;">ⓘ</span>
            </el-tooltip>
          </td>
        <tr>
          <td colspan="2" rowspan="2" @contextmenu.prevent="showProjectContextMenu($event, 0)">
            <el-tooltip content="右键点击可以新增或删除项目" placement="top" effect="light" :open-delay="500">
              <div>项目1名称</div>
            </el-tooltip>
          </td>
          <td colspan="2" rowspan="2"><input type="text" v-model="dataform.fSheet6bList[0].sportName" /></td>
          <td colspan="2">指导教师数量</td>
          <td colspan="2"><input type="text" v-model="dataform.fSheet6bList[0].teacherNum" /></td>
        </tr>
        <tr>
          <td colspan="2">教练员数量</td>
          <td colspan="2"><input type="text" v-model="dataform.fSheet6bList[0].coachNum" /></td>
        </tr>
        <tr>
          <td colspan="2" rowspan="2" @contextmenu.prevent="showProjectContextMenu($event, 1)">
            <el-tooltip content="右键点击可以新增或删除项目" placement="top" effect="light" :open-delay="500">
              <div>项目2名称</div>
            </el-tooltip>
          </td>
          <td colspan="2" rowspan="2"><input type="text" v-model="dataform.fSheet6bList[1].sportName" /></td>
          <td colspan="2">指导教师数量</td>
          <td colspan="2"><input type="text" v-model="dataform.fSheet6bList[1].teacherNum" /></td>
        </tr>
        <tr>
          <td colspan="2">教练员数量</td>
          <td colspan="2"><input type="text" v-model="dataform.fSheet6bList[1].coachNum" /></td>
        </tr>
        <template v-for="(item, index) in dataform.fSheet6bList.slice(2)">
          <tr>
            <td colspan="2" rowspan="2" @contextmenu.prevent="showProjectContextMenu($event, index + 2)">
              <el-tooltip content="右键点击可以新增或删除项目" placement="top" effect="light" :open-delay="500">
                <div>项目{{ index + 3 }}名称</div>
              </el-tooltip>
            </td>
            <td colspan="2" rowspan="2"><input type="text" v-model="item.sportName" /></td>
            <td colspan="2">指导教师数量</td>
            <td colspan="2"><input type="text" v-model="item.teacherNum" /></td>
          </tr>
          <tr>
            <td colspan="2">教练员数量</td>
            <td colspan="2"><input type="text" v-model="item.coachNum" /></td>
          </tr>
        </template>
        <tr>
          <td colspan="1" :rowspan="totalActivityRows">参加的活动和获得的荣誉与奖励(自2011年起)</td>
          <td colspan="1" :rowspan="additionalNationalRows + 1">全国性</td>
          <td colspan="1">参加时间</td>
          <td colspan="6">比赛/活动名称、奖励和荣誉</td>
        </tr>
        <template v-for="(item, index) in dataform.fSheet6cList.filter(item => item.joinActivityTypeId === 1)">
          <tr>
            <td colspan="1">
              <el-tooltip content="右键点击可以新增或删除行" placement="top" effect="light" :open-delay="500">
                <input type="text" v-model="item.joinTime"
                  @contextmenu.prevent="showActivityContextMenu($event, index, 'national')" />
              </el-tooltip>
            </td>
            <td colspan="6">
              <el-tooltip content="右键点击可以新增或删除行" placement="top" effect="light" :open-delay="500">
                <input type="text" v-model="item.result"
                  @contextmenu.prevent="showActivityContextMenu($event, index, 'national')" />
              </el-tooltip>
            </td>
          </tr>
        </template>
        <tr>
          <td colspan="1" :rowspan="additionalProvincialRows + 1">省市级</td>
          <td colspan="1">参加时间</td>
          <td colspan="6">比赛/活动名称、奖励和荣誉</td>
        </tr>
        <template v-for="(item, index) in dataform.fSheet6cList.filter(item => item.joinActivityTypeId === 2)">
          <tr>
            <td colspan="1">
              <el-tooltip content="右键点击可以新增或删除行" placement="top" effect="light" :open-delay="500">
                <input type="text" v-model="item.joinTime"
                  @contextmenu.prevent="showActivityContextMenu($event, index, 'provincial')" />
              </el-tooltip>
            </td>
            <td colspan="6">
              <el-tooltip content="右键点击可以新增或删除行" placement="top" effect="light" :open-delay="500">
                <input type="text" v-model="item.result"
                  @contextmenu.prevent="showActivityContextMenu($event, index, 'provincial')" />
              </el-tooltip>
            </td>
          </tr>
        </template>
        <tr>
          <td colspan="1" :rowspan="additionalOtherRows + 1">其他活动</td>
          <td colspan="1">参加时间</td>
          <td colspan="6">比赛/活动名称、奖励和荣誉</td>
        </tr>
        <template v-for="(item, index) in dataform.fSheet6cList.filter(item => item.joinActivityTypeId === 3)">
          <tr>
            <td colspan="1">
              <el-tooltip content="右键点击可以新增或删除行" placement="top" effect="light" :open-delay="500">
                <input type="text" v-model="item.joinTime"
                  @contextmenu.prevent="showActivityContextMenu($event, index, 'other')" />
              </el-tooltip>
            </td>
            <td colspan="6">
              <el-tooltip content="右键点击可以新增或删除行" placement="top" effect="light" :open-delay="500">
                <input type="text" v-model="item.result"
                  @contextmenu.prevent="showActivityContextMenu($event, index, 'other')" />
              </el-tooltip>
            </td>
          </tr>
        </template>
      </tbody>
    </table>
    <div style="display: flex; justify-content: space-between;">
      <div>填表人：<input type="text" v-model="dataform.writePeople" /></div>
      <div>联系电话：<input type="text" v-model="dataform.writePhone" /></div>
    </div>
    <div style="display: flex; justify-content: space-between;">
      <div>填报时间：<input type="text" v-model="dataform.writeTime" /></div>
      <div>填报单位：<input type="text" v-model="dataform.orgName" /></div>
    </div>
    <!-- 添加右键菜单 -->
    <div v-show="showMenu" :style="menuStyle" class="context-menu">
      <template v-if="currentSection === 'project'">
        <div @click="addRow" class="menu-item">新增一个项目</div>
        <div @click="deleteRow" class="menu-item">删除这个项目</div>
      </template>
      <template v-else-if="currentSection === 'activity'">
        <div @click="addRow" class="menu-item">新增一行</div>
        <div @click="deleteRow" class="menu-item">删除这行</div>
      </template>
    </div>
  </div>
</template>

<script>
  import qs from 'qs'
  import {
    insert_update_sheet6
  } from '@/api/statistics.js'
  export default {
    props: {
      Alldata: {
        type: Object,
        default: {}
      },
    },
    data() {
      return {
        showbutton: true,
        dataform: {
          orgName: '测试表6机构',
          masterOrgName: '主管单位',
          legalPerson: '法定代表人',
          responsiblePeople: '负责人名字',
          responsiblePhone: '负责人电话',
          manageTypeId: 1,
          upTime: '成立时间',
          acreage: '面积',
          getNationYear: '获得国家时间',
          getProvinceYear: '省时间',
          getCityYear: '地市时间',
          getCountyYear: '县级时间',
          manageOnNum: 34,
          manageOutNum: 12,
          teacherOnNum: 23,
          teacherOutNum: 6,
          coachOnNum: 71,
          coachOutNum: 12,
          yearActivityNum: 7,
          yearJoinPeopleNum: 1679,
          writePeople: '记录人',
          writeTime: '记录时间',
          writePhone: '记录人电话',
          fSheet6bList: [{
              sportName: '篮球',
              teacherNum: 6,
              coachNum: 8
            },
            {
              sportName: '跆拳道',
              teacherNum: 9,
              coachNum: 8
            },
            {
              sportName: '跆拳道',
              teacherNum: 9,
              coachNum: 8
            }
          ],
          fSheet6cList: [{
              joinActivityTypeId: 1,
              joinTime: '参加时间',
              result: '第一名'
            },
            {
              joinActivityTypeId: 1,
              joinTime: '参加时间2015',
              result: '第一名'
            },
            {
              joinActivityTypeId: 1,
              joinTime: '参加时间2015',
              result: '第一名'
            },
            {
              joinActivityTypeId: 2,
              joinTime: '参加时间2015',
              result: '第一名'
            },
            {
              joinActivityTypeId: 2,
              joinTime: '参加时间2015',
              result: '第一名'
            },
            {
              joinActivityTypeId: 2,
              joinTime: '参加时间2015',
              result: '第一名'
            },
            {
              joinActivityTypeId: 3,
              joinTime: '参加时间2015',
              result: '第一名'
            },
            {
              joinActivityTypeId: 3,
              joinTime: '参加时间2015',
              result: '第一名'
            },
            {
              joinActivityTypeId: 3,
              joinTime: '参加时间2015',
              result: '第一名'
            }
          ]

        },
        //经营模式 体育部门（1独立 2委托体校 3委托社会） 教育部门（4独立 5依托校外 6委托社会） 7其他 manageTypeId
        Businessmodel: {
          SportsIndependence: "",
          SportsSchool: "",
          SportsSociety: "",
          EducationalIndependence: "",
          EducationOffCampus: "",
          EducationalSociety: "",
          other: "",


        },
        showMenu: false,
        menuStyle: {
          left: '0px',
          top: '0px'
        },
        currentSection: '',
        currentRowIndex: -1,
        currentActivityType: ''
      };
    },

    //更新数据
    watch: {
      Alldata(newValue, oldValue) {

        this.dataform = newValue

        if (this.dataform.manageTypeId) {

          this.dataform.manageTypeId.split(",").forEach((item) => {
            if (item == "1") {
              this.Businessmodel.SportsIndependence = "√"
            }
            if (item == "2") {
              this.Businessmodel.SportsSchool = "√"
            }
            if (item == "3") {
              this.Businessmodel.SportsSociety = "√"
            }
            if (item == "4") {
              this.Businessmodel.EducationalIndependence = "√"
            }
            if (item == "5") {
              this.Businessmodel.EducationOffCampus = "√"
            }
            if (item == "6") {
              this.Businessmodel.EducationalSociety = "√"
            }
            if (item == "7") {
              this.Businessmodel.other = "√"
            }
          })

        }
        // if (this.dataform.campingType == 1) {
        //   this.campingTypelist.selfOwned = "√"
        // }
        // if (this.dataform.campingType == 2) {
        //   this.campingTypelist.lease = "√"
        // }
      },



    },



    methods: {

      showbuut() {
        this.showbutton = false
      },


      submit() {

        const manageTypeIdlist = []
        if (this.Businessmodel.SportsIndependence) {
          manageTypeIdlist.push('1')
        }

        if (this.Businessmodel.SportsSchool) {
          manageTypeIdlist.push('2')
        }
        if (this.Businessmodel.SportsSociety) {
          manageTypeIdlist.push('3')
        }
        if (this.Businessmodel.EducationalIndependence) {
          manageTypeIdlist.push('4')
        }
        if (this.Businessmodel.EducationOffCampus) {
          manageTypeIdlist.push('5')

        }
        if (this.Businessmodel.EducationalSociety) {
          manageTypeIdlist.push('6')
        }
        if (this.Businessmodel.other) {
          manageTypeIdlist.push('7')
        }


        this.dataform.manageTypeId = manageTypeIdlist.toString()



        insert_update_sheet6(this.dataform).then(res => {
          this.$message.success('填报成功')
          manageTypeIdlist = []
        })
      },

      showProjectContextMenu(event, index) {
        this.showMenu = true
        this.currentSection = 'project'
        this.currentRowIndex = index
        this.menuStyle = {
          left: event.clientX + 'px',
          top: event.clientY + 'px'
        }
      },

      showActivityContextMenu(event, index, type) {
        this.showMenu = true
        this.currentSection = 'activity'
        this.currentActivityType = type
        this.currentRowIndex = index
        this.menuStyle = {
          left: event.clientX + 'px',
          top: event.clientY + 'px'
        }
      },

      hideContextMenu() {
        this.showMenu = false
      },

      addRow() {
        if (this.currentSection === 'project') {
          const newProject = {
            sportName: '',
            teacherNum: '',
            coachNum: ''
          }
          this.dataform.fSheet6bList.push(newProject)
        } else if (this.currentSection === 'activity') {
          const newActivity = {
            joinActivityTypeId: this.currentActivityType === 'national' ? 1 : this.currentActivityType ===
              'provincial' ? 2 : 3,
            joinTime: '',
            result: ''
          }

          let insertIndex = this.currentActivityType === 'national' ? 3 :
            this.currentActivityType === 'provincial' ? 6 : 9

          this.dataform.fSheet6cList.splice(insertIndex, 0, newActivity)
        }
        this.hideContextMenu()
      },

      deleteRow() {
        if (this.currentSection === 'project') {
          if (this.dataform.fSheet6bList.length > 1) {
            this.dataform.fSheet6bList.splice(this.currentRowIndex, 1)
          }
        } else if (this.currentSection === 'activity') {
          const currentTypeId = this.currentActivityType === 'national' ? 1 :
            this.currentActivityType === 'provincial' ? 2 : 3

          const currentTypeActivities = this.dataform.fSheet6cList.filter(item =>
            item.joinActivityTypeId === currentTypeId
          )

          if (currentTypeActivities.length > 1) {
            const indexToDelete = this.dataform.fSheet6cList.findIndex(item =>
              item === currentTypeActivities[this.currentRowIndex]
            )
            if (indexToDelete !== -1) {
              this.dataform.fSheet6cList.splice(indexToDelete, 1)
            }
          }
        }
        this.hideContextMenu()
      }
    },
    computed: {
      additionalNationalRows() {
        return this.dataform.fSheet6cList.filter(item => item.joinActivityTypeId === 1).length
      },
      additionalProvincialRows() {
        return this.dataform.fSheet6cList.filter(item => item.joinActivityTypeId === 2).length
      },
      additionalOtherRows() {
        return this.dataform.fSheet6cList.filter(item => item.joinActivityTypeId === 3).length
      },
      totalActivityRows() {
        return 3 + this.additionalNationalRows + this.additionalProvincialRows + this.additionalOtherRows
      }
    },
    mounted() {
      document.addEventListener('click', this.hideContextMenu)
    },
    beforeDestroy() {
      document.removeEventListener('click', this.hideContextMenu)
    }
  }
</script>

<style>
  table {
    border-collapse: collapse;
    /* //合并为一个单一的边框 */
    border-color: #a2a7ab;
    /* //边框颜色按实际自定义即可 */
    margin-bottom: 10px;
  }

  thead tr th {
    background-color: #f8f8f9;
    /* //设置表格标题背景色 */
    padding: 3px;
    text-align: center;
  }

  tbody tr td {
    padding: 3px;
    text-align: center;
    height: 34px;
    /* //设置单元格最小高度 */
  }

  .context-menu {
    position: fixed;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 0;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }

  .menu-item {
    padding: 8px 12px;
    cursor: pointer;
  }

  .menu-item:hover {
    background-color: #f5f5f5;
  }
</style>
